<template>
  <div class="filediv">
    <el-row>
      <el-col :span="12">附件上传</el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <span>{{tableSetJson.label}}</span>
        <div>
          <el-upload ref="upload" :action="fileUrl" multiple :data="fileUploadData" :headers="headers"
                    :before-upload="beforeUpload" :on-success="uploadSuccess" :on-progress="uploadProgress">
            <el-button size="mini" type="primary">点击上传</el-button>
          </el-upload>
        </div>
        <div class="fileList">
            <el-progress :percentage="progress" v-show="progress !== 100 && progress !== 0"></el-progress>
            <div class="fileOne" v-for="file in fileList" :key="file.DOC_ID">
            <div class="file">{{ file.DOC_NAME}}</div>
            <div class="tool" style="cursor: pointer">
              <span @click="downloadFile(file.DOC_ID,file.DOC_NAME)">
                <i class="el-icon-download"></i>
              </span>
              <span @click="removeFile(file.DOC_ID)" style="margin-left: 4px;">
                <i class="el-icon-close"></i>
              </span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { uploadFile_Url, deleteFileUrl, executionSql } from "@/config/api"
import qs from 'qs'

export default {
  name: "fileupload",
  props: {
    /* 父组件传过来的数据 */
    tableSetJson: {
      type: Object
    },
    renumin: {
      type: Object
    },
    linkTableType: {
      type: String
    }
  },
  data() {
    return {
      fileList: [],
      fileUrl: '',//上传地址
      fileUploadData: {
        raid:"",
        linkTableType:""
      },//上传参数
      progress: 0,//下载进度

      mulrenum: this.renumin,
      token: ""
    };
  },
  created() {
    this.token = localStorage.getItem("set_token");
    this.comUploadParam();
    this.queryUploadFile();
  },
  computed: {
    headers() {
      return{
        "Authorization": this.token // 直接从本地获取token就行
      }
    }
  },
  methods: {
    
    //初始化上传参数
    comUploadParam() {
      this.fileUrl = this.axios.defaults.baseURL+"/quality/common/multifilesUpload";
      this.fileUploadData = {
        raid: this.renumin.raId,
        linkTableType: this.linkTableType,
        rnucode: this.mulrenum.rnuCode
      }
    },
    /* 往父节点传值的方法 */
    getChangeStringValue() {
      this.mulrenum.rnuCode = this.tableSetJson.name;
      this.mulrenum.rnuType = this.tableSetJson.type;   
      this.mulrenum.rnuNo = this.tableSetJson.orderno;
      this.$emit("listenToDateInput", this.mulrenum);
    },
    setPlaceholder() {
      return this.tableSetJson.texttip;
    },
    uploadProgress(event, file, fileList) {
      this.progress = event.percent;
    },
    downloadFile(DOC_ID, showName) {
      const data = {docId: DOC_ID};
      this.axios.post('/quality/common/downFile', qs.stringify(data), {responseType: 'blob'}).then(data => {
        // axios.get('/downloadFile?' + 'fileName=' + name + '&fileShowName=' + showName, ).then(data => {
        if (data.status === 200) {
          const blob = new Blob([data.data]);
          const url = window.URL.createObjectURL(blob);
          // window.location.href = url
          const downloadElement = document.createElement('a');
          downloadElement.href = url;
          downloadElement.download = showName;

          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(blob)
        }
      })
    },
    removeFile(docId) {
      deleteFileUrl({
        docId: docId
      }).then(res => {
        if (res.data.success === true) {
          this.$message.success('删除成功！');
          this.queryUploadFile();
        } else {
          this.$message.error('删除失败：' + res.data.msg);
        }
      });
    },
    queryUploadFile() {
      if (this.renumin.raId != null && this.renumin.raId != "") {
        executionSql({
          dsCode:"ZL_DOCUMENTFILES",
          docRelId: this.renumin.raId,
          docType: "0"
        }).then(res => {
          if (res.data.success === true) {
            this.fileList = res.data.data;
          } else {
            this.fileList = [];
          }
        });
      } else {
        this.fileList = [];
      }
    },
    beforeUpload(file) {
      if (this.renumin.raId == null || this.renumin.raId == "") {
        this.$message.error('未生成填报，不允许上传！');
        return false;
      }
      let fileName = file.name;
    },
    uploadSuccess(response, file, fileList) {
      if (response.success === true) {
        this.$message.success('上传成功！');
        this.$refs.upload.clearFiles()
        this.queryUploadFile()
      } else {
        this.$message.error('上传失败！')
      }
    }
  }
};
</script>
<style>
.prepend-fileupload {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  white-space: nowrap;
  text-align: center;
  height: 30px;
  line-height: 30px;
  float: left;
  font-size: 13px;
  border-right: 0;
}
.filediv {
  width: 724px;
  margin-left: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: #f3f3f3;
}
.upload {
  display: none;
}
.showUpload:hover .upload {
  display: block;
}
.el-table .add-row {
  background: #f0f9eb;
}
.fileList {
  margin-top: 12px;
}
.fileList .fileOne {
  display: flex;
  justify-content: space-between;
  padding: 0px 2px;
  /* margin-bottom: 8px; */
  line-height: 24px;
}
.fileList:hover {
  background-color: #eee;
}
.fileList:hover .tool {
  display: inline-block
}
.fileList .tool {
  display: none;
}
.fileList .file {
  width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.badge:hover {
  color: #3888cd
}
</style>


